<template>
  <div class="uploadgard">
    <Comheader :isTrue="false">
      <h1>成绩修改页面</h1>
    </Comheader>

    <div class="center">
    
        <img :src="user.headerimg?user.headerimg:`${$store.state.defaulheaderturl}user/user.jpg`" alt="">

      <el-form
        border
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >

     
        <el-form-item label="年级" prop="test_grade">
          <el-select v-model="ruleForm.test_grade" placeholder="请选择年级">
            <el-option label="学前教育" value="0"></el-option>
            <el-option label="一年级" value="1"></el-option>
            <el-option label="二年级" value="2"></el-option>
            <el-option label="三年级" value="3"></el-option>
            <el-option label="四年级" value="4"></el-option>
            <el-option label="五年级" value="5"></el-option>
            <el-option label="六年级" value="6"></el-option>
            <el-option label="七年级" value="7"></el-option>
            <el-option label="八年级" value="8"></el-option>
            <el-option label="九年级" value="9"></el-option>

            <el-option label="高一" value="10"></el-option>
            <el-option label="高二" value="11"></el-option>
            <el-option label="高三" value="12"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="科目" prop="test_project">
          <el-select v-model="ruleForm.test_project" placeholder="请选择科目">
            <el-option label="语文" value="1"></el-option>
            <el-option label="数学" value="2"></el-option>
            <el-option label="外语" value="3"></el-option>
            <el-option label="政治" value="4"></el-option>
            <el-option label="历史" value="5"></el-option>
            <el-option label="地理" value="6"></el-option>
            <el-option label="物理" value="7"></el-option>
            <el-option label="化学" value="8"></el-option>
            <el-option label="生物" value="9"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="测试类型" prop="test_type">
          <el-select v-model="ruleForm.test_type" placeholder="请选择测试类型">
            <el-option label="日常测试" value="1"></el-option>
            <el-option label="周测" value="2"></el-option>
            <el-option label="月测" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户id" prop="_id" style="display: none">
          <el-input type="text" v-model="ruleForm._id"></el-input>
        </el-form-item>

        <!-- <el-form-item label="卷名" prop="test_name">
          <el-input type="text" v-model="ruleForm.test_name"></el-input>
        </el-form-item> -->

        <el-form-item label="实际得分" prop="test_rank1">
          <el-input type="number" v-model="ruleForm.test_rank1"></el-input>
        </el-form-item>

        <el-form-item label="测试总分" prop="test_rank2">
          <el-input type="number" v-model="ruleForm.test_rank2"></el-input>
        </el-form-item>

        <el-form-item label="班级排名" prop="class_ranking">
          <el-input type="textarea" v-model="ruleForm.class_ranking"></el-input>
        </el-form-item>
        <el-form-item label="校排名" prop="school_ranking">
          <el-input
            type="textarea"
            v-model="ruleForm.school_ranking"
          ></el-input>
        </el-form-item>
        <el-form-item label="区排名" prop="area_ranking">
          <el-input type="textarea" v-model="ruleForm.area_ranking"></el-input>
        </el-form-item>
        <el-form-item label="市排名" prop="city_ranking">
          <el-input type="textarea" v-model="ruleForm.city_ranking"></el-input>
        </el-form-item>

        <el-form-item label="考试反思" prop="test_note">
          <!-- <el-input type="textarea" :rows="4" v-model="ruleForm.test_note"></el-input> -->
          <quill-editor
            :options="editorOption"
            v-model="ruleForm.test_note"
          ></quill-editor>
        </el-form-item>
        <el-form-item class="fixcenter">
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import Comheader from "@/components/common/Comheader.vue";
export default {
  data() {
    return {
      user: {},
      content: null,
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
            ["blockquote", "code-block"], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
            [{ script: "sub" }, { script: "super" }], // 上标/下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            // [{'direction': 'rtl'}],                         // 文本方向
            [{ size: ["small", false, "large", "huge"] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            [{ color: "#fff" }, { background: ["#fff"] }], // 字体颜色、字体背景颜色
            [{ font: [] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ["clean"], // 清除文本格式
            ["link", "image", "video"], // 链接、图片、视频
          ], //工具菜单栏配置
        },
        placeholder: "请在这里添加产品描述", //提示
        readyOnly: false, //是否只读
        theme: "snow", //主题 snow/bubble
        syntax: true, //语法检测
      },
      ruleForm: {
        test_grade: "",
        test_name: "",
        test_rank1: "",
        test_rank2: "",
        test_project: "",
        test_type: "",
        class_ranking: "",
        school_ranking: "",
        area_ranking: "",
        city_ranking: "",
        test_note: "",
        _id: "",
      },
      rules: {
        test_grade: [
          { required: true, message: "请选择年级", trigger: "blur" },
        ],
        test_name: [
          {
            required: true,
            message: "请填写试卷名，不可重复",
            trigger: "blur",
          },
        ],
        test_rank1: [
          { required: true, message: "请填写分数", trigger: "blur" },
        ],
        test_rank2: [
          {
            required: true,
            message: "请填写试卷总分，最总成绩将转化为100分制",
            trigger: "blur",
          },
        ],
        test_type: [
          {
            required: true,
            message: "请选择测试类型",
            trigger: "blur",
          },
        ],
        test_project: [
          {
            required: true,
            message: "请选择科目",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.ruleForm._id = JSON.parse(window.sessionStorage.getItem("user"))._id;
    this.user = JSON.parse(window.sessionStorage.getItem("user"));
        this.user = JSON.parse(sessionStorage.getItem("user")); 
       //初始化轻音乐的播放
  this.$store.commit("setShowData",this.user.user_music_isplay)

    //获取传递过来的参数
    let id = this.$route.params.id;
    this.getRank(id);
  },
  components: {
    Comheader,
  },
  methods: {
    //获取当前成绩的数据
    async getRank(e) {
      let data = await this.$http.get("home/Rank", {
        params: {
          _id: e,
        },
      });
      if (data.status == 200) {
        this.ruleForm = data.data.data;
      } else {
        this.$message.error(data.data.message);
      }
    },

    //提交修改
    submitForm(formName) {
      // console.log(this.ruleForm);
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let data = await this.$http.put("/home/putRank", this.ruleForm);
          // console.log(data.data.data);
          if (data.status == 200) {
            this.$message.success("ok");
            this.$router.push("/project/grade/0");
          }
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style lang="less" scoped>
.uploadgard {
  padding-bottom: 30px !important;
  // background-color: red;
}
.el-form {
  height: 100%;
}

.center {
  padding: 20px 30px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 900px;
  margin: 20px auto;
  padding-bottom: 30px;
  position: relative;
  img{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: absolute;
    right: 35px;
    top: 28px;
  }
}

@Color: #409eff;
.el-containe {
  min-height: 100vh;
}
.outline {
  position: absolute;
  right: 50px;
  top: 25px;
  // width: 30px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
  i {
    font-size: 30px;
    &:hover {
      color: @Color;
    }
  }
}
.el-header {
  height: 80px !important;
  background-color: #ccc;
  line-height: 80px;
  padding-left: 30px;
  position: relative;
  .fh {
    cursor: pointer;
    position: absolute;
    left: 50px;
    top: 25px;
    // width: 30px;
    height: 30px;
    line-height: 30px;
  }
  .userheader {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #898989;
    position: absolute;
    top: 15px;
    left: 30px;
  }
  h1 {
    text-align: center;
    color: @Color;
  }
}
</style>